<template>
  <div class="page">
    <titleBar></titleBar>
    <div class="content">
      <div class="swiper-img-box">
        <van-swipe
          class="my-swipe"
          :autoplay="3000"
          indicator-color="#232f3e"
          :loop="false"
        >
          <van-swipe-item v-for="item in rotationList" :key="item.id"
            ><img class="swipe-item-img" :src="item.images" alt=""
          /></van-swipe-item>
        </van-swipe>
      </div>
      <div class="location-box">
        <div class="area-flex-box" @click="showLocationBox = !showLocationBox">
          <div class="area-box-lf">
            {{ country }}{{ cityName ? "/" + cityName : "" }}
          </div>
          <div class="area-box-rg">
            <img
              class="bottom-icon-bl-img"
              src="../../assets/images/home/bottom-icon-bl.png"
              alt=""
            />
          </div>
        </div>
        <!-- 下拉选择框 -->
        <div class="location-select-box" v-if="showLocationBox">
          <div class="search-box">
            <van-field
              class="location-ipt"
              v-model="searchWord"
              right-icon="warning-o"
              placeholder="State of California"
            >
              <template #right-icon>
                <img
                  class="search-icon"
                  src="../../assets/images/home/search-icon.png"
                  alt=""
                />
              </template>
            </van-field>
          </div>
          <div class="location-list">
            <div class="location-state" v-if="showStateBox">
              <!-- <div class="location-list-title">A</div> -->
              <div class="location-list-box">
                <van-radio-group v-model="city">
                  <van-cell-group>
                    <van-cell
                      class="state-cell"
                      v-for="item in stateList"
                      clickable
                      :key="item.deptId"
                      :title="item.deptName"
                    >
                      <template #right-icon>
                        <van-radio
                          icon-size="20px"
                          shape="square"
                          checked-color="#273458"
                          :name="item.deptId"
                          @click="handleCity(item)"
                        />
                      </template>
                    </van-cell>
                  </van-cell-group>
                </van-radio-group>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="title" v-if="advertisementCountData.advertisementCount > 0">
        {{ advertisementCountData.advertisementCount }} ads in
        {{ advertisementCountData.cityName }}
      </div>
      <div class="img-box">
        <div
          class="img-box-item"
          :class="{ activeBg: isActive === index }"
          @click="goDetails(item.advertisementId)"
          v-for="(item, index) in adVipList"
          :key="index"
        >
          <div class="img-bigBox">
            <img class="img-box-img" :src="item.imagesOne" alt="" />
          </div>

          <div class="img-text">
            <span class="img-text-p">{{ item.advertisementName }}</span>
            <span>{{ item.race }}</span>
          </div>
        </div>
      </div>
    </div>
    <router-view />
    <van-tabbar route active-color="#027AFC" inactive-color="#666666">
      <van-tabbar-item replace to="/vip">
        <span> {{ $t("vip") }} </span>
        <template #icon="props">
          <img :src="props.active ? icon.active1 : icon.inactive1" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/">
        <span> {{ $t("home") }} </span>
        <template #icon="props">
          <img :src="props.active ? icon.active2 : icon.inactive2" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/postAd">
        <span> {{ $t("post AD") }} </span>
        <template #icon="props">
          <img :src="props.active ? icon.active3 : icon.inactive3" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/myAD">
        <span> {{ $t("my AD") }} </span>
        <template #icon="props">
          <img :src="props.active ? icon.active4 : icon.inactive4" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/personal">
        <span> {{ $t("profile") }} </span>
        <template #icon="props">
          <img :src="props.active ? icon.active5 : icon.inactive5" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import titleBar from "../../components/titleBar.vue";
import {
  apiVipList,
  apiRotationList,
  apiGetDeptList,
  apiGetAdvertisementCount,
} from "../../request/api";
export default {
  name: "vip",
  components: { titleBar },
  data() {
    return {
      active: 0,
      icon: {
        active1: require("../../assets/images/tabbar/tabbar1.png"),
        inactive1: require("../../assets/images/tabbar/tabbar2.png"),
        active2: require("../../assets/images/tabbar/tabbar3.png"),
        inactive2: require("../../assets/images/tabbar/tabbar4.png"),
        active3: require("../../assets/images/tabbar/tabbar5.png"),
        inactive3: require("../../assets/images/tabbar/tabbar6.png"),
        active4: require("../../assets/images/tabbar/tabbar7.png"),
        inactive4: require("../../assets/images/tabbar/tabbar8.png"),
        active5: require("../../assets/images/tabbar/tabbar9.png"),
        inactive5: require("../../assets/images/tabbar/tabbar10.png"),
      },
      // lang: "EN",
      country: "USA",
      showLocationBox: false,
      searchWord: "",
      state: "",
      // 州列表
      stateList: [],
      showStateBox: true,
      showCityBox: true,
      isActive: null,
      adVipList: [],
      city: "",
      cityName: "",
      pageNum: "",
      pageSize: "",
      langeuage: "",
      // 轮播列表
      rotationList: [],
      // 获取当前城市名称与广告总数
      advertisementCountData: {},
    };
  },
  created() {
    apiVipList({
      city: this.city,
      pageNum: this.pageNum,
      pageSize: this.pageSize,
      langeuage: this.langeuage,
    }).then((res) => {
      if (res.code == 200) {
        this.adVipList = res.rows;
      }
    });
    apiRotationList({}).then((res) => {
      if (res.code == 200) {
        this.rotationList = res.rows;
        console.log(res);
      }
    });
    apiGetDeptList({ parentId: "100" }).then((res) => {
      if (res.code == 200) {
        this.stateList = res.data;
      }
    });
  },
  mounted() {},
  methods: {
    goDetails(id) {
      this.$router.push({
        path: "/vipDetails",
        query: { id },
      });
    },
    handleCity(item) {
      this.cityName = item.deptName;
      apiVipList({
        city: this.city,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        langeuage: this.langeuage,
      }).then((res) => {
        if (res.code == 200) {
          this.adVipList = res.rows;
        }
      });
      apiGetAdvertisementCount({
        city: this.city,
      }).then((res) => {
        if (res.code == 200) {
          this.advertisementCountData = res.data;
        }
      });
      this.showLocationBox = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  background: #f0f0f0;
}
.content {
  margin: 14px 17px 120px;
  .swiper-img-box {
    :deep(.van-swipe__indicator) {
      width: 14px;
      height: 14px;
      margin-right: 10px !important;
    }
    .swipe-item-img {
      width: 100%;
      height: auto;
    }
  }

  // 地区下拉框
  .location-box {
    position: relative;
    margin: 20px 0;
    .area-flex-box {
      height: 80px;
      background: #ffffff;
      border: 1px solid rgba(112, 112, 112, 0.34);
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px;
    }
    .area-box-lf {
      font-size: 28px;
      font-weight: 400;
      color: #242424;
    }
    .bottom-icon-bl-img {
      width: 48px;
      height: 48px;
    }
    .location-select-box {
      z-index: 1;
      background: #fff;
      padding: 20px;
    }
    .search-box {
      height: 81px;
      background: #ffffff;
      border: 1px solid #b2b2b2;
      margin-bottom: 30px;
    }
    .location-ipt {
      height: 81px;
      align-items: center;
    }
    :deep(.van-field__control) {
      font-size: 28px;
    }
    .search-icon {
      width: 29px;
      height: 29px;
    }
    .location-list {
      margin-bottom: 40px;
    }
    .location-list-title {
      font-size: 30px;
      font-weight: bold;
      color: #000000;
    }
    .state-cell {
      box-sizing: border-box;
      padding: 26px 0;
      overflow: hidden;
      font-size: 28px;
      font-weight: 400;
      color: #000000;
    }
    .state-value {
      font-size: 28px;
      font-weight: 400;
      color: #000000;
      text-align: center;
    }
    .city-cell {
      box-sizing: border-box;
      padding: 26px 0;
      overflow: hidden;
      font-size: 24px;
      font-weight: 400;
      color: #989898;
    }
    .city-value {
      font-size: 24px;
      font-weight: 400;
      color: #989898;
      text-align: center;
    }
  }
  .title {
    font-size: 24px;
    font-weight: 400;
    color: #5d5d5d;
    margin: 20px 0;
  }
  .img-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    .img-box-item {
      width: calc(50% - 10px);
      height: 520px;
      margin-bottom: 20px;
      background-color: #fff;
      padding: 20px;
      color: #000000;
      box-sizing: border-box;
    }
    .activeBg {
      background-color: #273458;
      color: #fff;
    }
    .img-box-item:nth-child(odd) {
      margin-right: 10px;
    }
    .img-box-item:nth-child(even) {
      margin-left: 10px;
    }
    .img-bigBox {
      position: relative; /*相对定位*/
      height: 420px;
      margin-bottom: 20px;
      display: flex; /*弹性盒，用于居中*/
      justify-content: center; /*水平中心*/
      align-items: center; /*垂直中心*/
    }
    .img-box-img {
      max-width: 100%; /*最大宽度不超过父元素宽度*/
      max-height: 100%; /*最大高度不超过父元素高度*/
      object-fit: contain; /*调整比例,居中*/
    }
    .img-text {
      font-size: 26px;
      font-weight: bold;
    }
    .img-text-p {
      margin-right: 30px;
    }
  }
}
</style>
